{#
 This Source Code Form is subject to the terms of the Mozilla Public
 License, v. 2.0. If a copy of the MPL was not distributed with this
 file, You can obtain one at https://mozilla.org/MPL/2.0/.
#}

{% from "firefox/family/includes/macros.html" import module_tag, browser_border %}

<section id="bullying" class="c-bullying">
  <div class="mzp-l-content mzp-t-content-xl">
    {{ module_tag(title='Bullying', anchor='bullying') }}
    <div class="l-flex">
      <div class="c-content">
        <h3 class="c-subtitle">Ugh, trolls amiright?</h3>
        <p>Internet trolls can be brutal on kids, especially kids who post to social
          media, where their fears and feelings are an easy meal.</p>
      </div>

      {% call browser_border(class='hearts-image') %}
        <svg class="nested-hearts" xmlns="http://www.w3.org/2000/svg" width="287" height="276" fill="none" viewBox="0 0 287 276">
          <title>Nested hearts in a rainbow of colors</title>
          <g stroke="#333336" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" clip-path="url(#hearts-clip)">
            <path class="animate heart11" fill="#9059FF" d="M367.124-33.556c-61.924-61.925-162.153-61.925-224.077 0-61.924-61.925-162.153-61.925-224.077 0-61.924 61.923-61.924 162.152 0 224.076l224.077 224.077L367.124 190.52c61.924-61.924 61.924-162.153 0-224.077Z"/>
            <path class="animate heart10" fill="#C7ABFF" d="M347.138-14.177c-56.322-56.322-147.619-56.322-203.789 0-56.322-56.322-147.618-56.322-203.79 0-56.321 56.322-56.321 147.618 0 203.789l203.79 203.789 203.789-203.789c56.322-56.322 56.322-147.618 0-203.789Z"/>
            <path class="animate heart9" fill="#FFABB0" d="M328.364 1.115c-51.174-51.174-134.144-51.174-185.318 0-51.174-51.174-134.143-51.174-185.318 0-51.174 51.175-51.174 134.143 0 185.318l185.318 185.318 185.318-185.318c51.174-51.175 51.174-134.143 0-185.318Z"/>
            <path class="animate heart8" fill="#C4FCE3" d="M308.532 18.98c-45.724-45.723-119.76-45.723-165.484 0-45.724-45.723-119.76-45.723-165.484 0-45.723 45.724-45.723 119.761 0 165.485l165.484 165.483 165.484-165.483c45.724-45.724 45.724-119.76 0-165.484Z"/>
            <path class="animate heart7" fill="#F7D5B6" d="M288.091 37.148c-40.122-40.122-105.074-40.122-145.196 0-40.122-40.122-105.074-40.122-145.196 0s-40.122 105.074 0 145.196L142.895 327.54l145.196-145.196c40.121-40.122 40.121-105.074 0-145.196Z"/>
            <path class="animate heart6" fill="#FFFFF2" d="M268.106 55.165c-34.52-34.52-90.539-34.52-125.059 0-34.52-34.52-90.54-34.52-125.06 0-34.52 34.52-34.52 90.539 0 125.059l125.06 125.059 125.059-125.059c34.52-34.52 34.52-90.54 0-125.06Z"/>
            <path class="animate heart5" fill="#C7ABFF" d="M249.027 72.274c-29.221-29.22-76.762-29.22-105.983 0-29.22-29.22-76.761-29.22-105.982 0-29.22 29.221-29.22 76.762 0 105.983l105.982 105.982 105.983-105.982c29.221-29.221 29.221-76.762 0-105.983Z"/>
            <path class="animate heart4" fill="#F7D5B6" d="M229.952 89.383c-24.073-24.073-62.984-24.073-86.906 0-24.073-24.073-62.983-24.073-86.905 0-24.073 24.073-24.073 62.984 0 86.906l86.905 86.905 86.906-86.905c24.073-24.073 24.073-62.984 0-86.906Z"/>
            <path class="animate heart3" fill="#FFFFF2" d="M209.817 107.399c-18.471-18.471-48.449-18.471-66.92 0-18.471-18.471-48.45-18.471-66.92 0-18.472 18.471-18.472 48.449 0 66.92l66.92 66.921 66.92-66.921c18.471-18.471 18.471-48.449 0-66.92Z"/>
            <path class="animate heart2" fill="#9059FF" d="M189.074 126.023c-12.718-12.718-33.309-12.718-46.027 0-12.717-12.718-33.308-12.718-46.026 0-12.718 12.718-12.718 33.309 0 46.026l46.026 46.027 46.027-46.027c12.718-12.717 12.718-33.308 0-46.026Z"/>
            <path class="animate heart1" fill="#FFABB0" d="M171.813 141.465c-8.024-8.025-20.893-8.025-28.766 0-8.025-8.025-20.894-8.025-28.767 0-7.873 8.024-8.024 20.893 0 28.766l28.767 28.767 28.766-28.767c8.025-8.024 8.025-20.893 0-28.766Z"/>
          </g>
          <path stroke="#000" stroke-width="3" d="M1.547 1.977h283v271.595h-283z"/>
          <defs>
            <clipPath id="hearts-clip">
              <path fill="#fff" d="M.047.477h286v274.595h-286z"/>
            </clipPath>
          </defs>
        </svg>
        <img src="{{ static('img/firefox/family/reaction-box.svg') }}" alt="12 Likes, 27 Friends, 6 Comments" width="328" height="104" class="c-reaction-box">
      {% endcall %}

      <div class="c-card t-shadow">
        <h4 class="c-title-uppercase">What to do:</h4>
        <ul class="mzp-u-list-styled">
          <li>Discuss implementing a “positive comments only” rule.</li>
          <li>Talk about how publicly posted pictures can be misused.</li>
          <li>Block users who are offensive, bullying or negative.</li>
          <li>Agree to report online bullying to school administrators.</li>
        </ul>
      </div>

      <aside class="c-blurb">
        <h4 class="c-blurb-title">Fun fact:</h4>
        <p>A 2019 US study indicated that nationwide, about 16 percent of students in grades 9–12 have experienced cyberbullying. <span class="c-blurb-source">Source: stopbullying.gov</span></p>
      </aside>
    </div> <!-- end .l-flex -->
  </div> <!-- end .mzp-l-content -->
</section>
